Running a web application in a window frame

Motivations
- In MainPage of TRUQA, you will have a menu of 'Search', 'Post a Question', 'Answer a Question'. When the user selects 'Search', a modal window will be displayed to get a search query, and the search query will be sent. The search result will come back. Where do you want to display the search result, or are you going to redisplay MainPage with the search result?
- Isn't it possible to display the result without reloading the entire page? Can you just use a part of the MainPage window to display the result?
- Another example is Run HTML/PHP. The execution result is displayed in the right side pane.
- The box and a button on the right side of this page is another example. Try it!
- This idea can be used in SPAs.
How to open a new window?
- How to open a new window using JavaScript code?
  - Read all in Window open() Method.
    - How are _blank, _parent, _self, and _top different?
    - The value for 'name' can be the name of another window. What does this mean?
    - What is the return value?
    - How to write html content into the new window? new_window_obj.document.body....
    - How to close a window?
  - Can you make the two, child and parent, windows access each other? The return value from open() is the reference of the child window. The window object also has the property 'parent' that can be used to access the parent window.
- How to open a linked window?
  - Read all in HTML <a> target Attribute.
    - What values are supported by the 'target' attribute? _blank, _parent, _self, _top, and framename
    - What is the 'framename' value? name of an iframe
    - Are they different from the values for 'name' in window.open()?
- How to open a new window for displaying the result for form data?
How to display a web page within a web page?
- Example on the top and right coner.
- Here is another example.
- Read all in HTML Iframes (inline frames).
  - When do you use iframe?
  - How to display an URL within an iframe, when the URL is clicked?
  - Does an iframe have to always have the 'src' attribute?
    - An iframe can be used with other elements, such as <form> and <a>, with the 'target' attribute. The value of the 'target' attribute is the value of the 'name' attribute in the target iframe.
    - Here is an example how to change the target to an iframe.
```
<iframe name="iframe_a"></iframe>
<p><a href="https://cs.tru.ca/~mlee/comp3540" target="iframe_a">COMP 3540</a></p>
```
  - List the three types how to display web content in an iframe.
  - Here is an image showing the window object with iframes.
  - Trial 1: Let's display cs.tru.ca in an iframe.
    <a href='//cs.tru.ca' ????>cs.tru.ca</a> <br> <iframe ???='tr1-iframe' width='400px' height='300px'> </iframe>
  - Trial 2: Let's send a query to the server and display the content coming from the server into an iframe.
    <form method='get' action='iframe-exercise1.php' ???='tr2-iframe'> <input type='text' name='command'> <input type=???> </form> <br> <iframe ???='tr2-iframe' width='400px' height='100px'> </iframe>
- Now do you know how to display the search result in an iframe, when 'Search Questions' menu item in TRUQA is selected?
  - Use a form with the url that searches and displays the result.
  - The form data will be submitted to Controller.
  - Controller sends data back and does not include "MainPage".
  - The content/data coming from Controller can be directed into an iframe using 'target' in <form>.
  - In this way, MainPage will not be reloaded.
How can the child window in an iframe communicate with the parent window??
- How do you know in JavaScript code whether the iframe is completely loaded with new web content?
  - Any good ideas?
  - Read all in onload Event.
    - When does the 'load' event occur?
    - Can you give the three different styles to register event handlers?
    - Which elements trigger this event?
    - Do you think you can use this event on an iframe too?
    - How do you check if 'Cookies' are enabled? Which object contains the information about the browser?
      - The Navigator Object
  - Here is an example how to check if the iframe with name='iframe_a' is loaded.
```
$('[name="iframe_a"]').on('load', function() {
    ...
});
```
  - Trial 3: Let's check if an iframe is fully loaded.
    <form method='get' action='iframe-exercise1.php' target='tr3-iframe'> <input type='text' name='command'> <input type="submit" value="Submit"> </form> <br> <iframe name='tr3-iframe' width='400px' height='100px'> </iframe> <script> $(???).???(???, function() { alert('Iframe loaded!'); }); </script>
- How do you access the elements/JS code in an iframe window?
  - Any good ideas?
  - Read all in IFrame contentDocument Property.
    - Which property is used?
    - Any security issues?
  - Here is an example.
  - Is it always possible? The same origin policy in web browsers?
  - Here is another example how to read data from an iframe.
```
$('[name="iframe_a"]').on('load', function() {
    alert(this.contentWindow.document.body.innerHTML);
    alert(this.contentDocument.getElementById('test').innerHTML);
    alert(this.contentWindow.test_variable);  // test_variable is a varible in a script loading in the iframe.
});
/* in iframe-exercise1.php,
<?php
    echo "<p id='p-iframe-exercise1'>Received command = " . $_GET['command'] . "</p>";
    echo "<script> var result = '" . "The received command is " . $_GET['command'] . "';</script>";
?>
*/
```
  - Trial 4: Let's try to access a varible loaded into an iframe.
    <form method='get' action='iframe-exercise1.php' target='tr4-iframe'> <input type='text' name='command'> <input type="submit" value="Submit"> </form> <br> <div id='tr4-result-pane' style='width:400px; height:100px; border:1px solid black'>Results will be displayed here.</div> <iframe name='tr4-iframe' width='400px' height='100px'> </iframe> <script> $('[name="tr4-iframe"]').on('load', function() { var result = ???.???.result; // Display the result value loaded in the above <iframe> into the above <div>. ????(result); // You may check the source code of the above iframe. }); </script>
- How do you access the elements in the parent window from an iframe window?
  - Any good ideas?
  - Read all in Window parent Property.
    - Which property is used?
    - Any security issues?
  - Here is an example.
  - Is it always possible? The same origin policy in web browsers?
- Here is another example.
  - What if the iframe is hidden?
- How to make two web applications on the same browser exchange data/signals?
- Can you use an iframe as a tool to communicate with the server? Any good idea?

How to use iframe in MainPage of TRUQA

<form target='name-iframe-mainpage' method=... action=...>...</form>
<iframe name=??? style='display:none'></iframe>

$('#id-iframe-mainpage').on('load', function() {
    var data = this.contentWindow.data_sent_from_server;  // data_sent_from_server is a variable that holds hard coded data. 
                                                          // This data might be an object. 
                                                          //   How can PHP code send a JS object? As a string?
                                                          //   We will discuss about this later again.
    var table = ... // using the above data
    $('#id-result-pane-mainpage').html(table);
});

Advanced: Cross-document messageing
- Cross-document messaging allows a script from one page to pass textual messages to a script on another page regardless of the script origins. Calling the postMessage() method on a Window object asynchronously fires an "onmessage" event in that window, triggering any user-defined event handlers. A script in one page still cannot directly access methods or variables in the other page, but they can communicate safely through this message-passing technique.
- Example: Download test_postmessage_iframe.html and run it by double clicking. You may check the source code.
- Applications?
Some review questions and learning outcomes
- How to write new content into a newly created window?
- How to redirect the web content linked with <a> into an iframe
- How to redirect the web content coming from the server as the result of <form> into an iframe
- How to write JS code into an iframe? iframe_obj.contentWindow.document.write('<p>Hmmmmm</p>'); iframe_obj.contentWindow.close();
- How to access JS code in an iframe? alert(iframe_obj.contentWindow.data_sent_from_server);
- How to use this above idea in MainPage of TRUQA
- How to use iframe to open a new window within the current window
- Explain how iframe window can access its parent window, with a specific example.
- Explain how the current window access iframe child windows, with a specific example.

5.4 Running a web application in a window frame